var backButton;
var navigationBar;
var cardController;

Ext.ux.UniversalUI = Ext.extend(Ext.Panel, {
    tabBar: { dock: 'bottom', ui: 'light', layout: { pack: 'center' }, items: [{ title: 'About', iconCls: 'info', cls: 'card card1'}] },
    fullscreen: true,
    layout: 'card',
    items: [{
        cls: 'launchscreen',
        items: [
                    { xtype: 'button', text: 'Where I am', style: 'width: 100%;height:50px', handler: function () { initStopDetailsPanel(); setCard('stop-details') } },
                    { xtype: 'button', text: 'Fastest Way', style: 'width: 100%;margin-top: 20px;height:50px' },
                    { xtype: 'button', text: 'Next Transport', style: 'width: 100%;margin-top: 20px;height:50px', handler: function () { getNextTransports(); setCard('next-transport'); } },
                    { xtype: 'button', text: 'Trip Planner', style: 'width: 100%;margin-top: 20px;height:50px', handler: function () { setCard('trip-planner') } }
               ]
    }],
    initComponent: function () {
        backButton = new Ext.Button({
            hidden: true,
            text: 'Back',
            ui: 'back',
            handler: this.onBackButtonTap,
            scope: this
        });

        this.backButton = backButton;

        navigationBar = new Ext.Toolbar({
            ui: 'light',
            dock: 'top',
            title: this.title,
            items: [this.backButton].concat(this.buttons || [])
        });

        var e = new Ext.Toolbar({
            dock: 'bottom',
            ui: 'light',
            layout: { pack: 'center' },
            defaults: { ui: 'mask' },
            items: [
                { iconCls: 'home', handler: function () { setCard('root') } },
                { iconCls: 'maps', handler: function () { setCard('trip-planner-map'); showCurrentLocation() } },
                { iconCls: 'bookmarks', badgeText: '1' }
            ]
        });

        this.navigationBar = navigationBar;
        this.dockedItems = this.dockedItems || [];

        this.dockedItems = [this.navigationBar, e];
        this.addEvents('navigate');

        Ext.ux.UniversalUI.superclass.initComponent.call(this);
        cardController = this;
    },

    onListChange: function (list, item) { },
    onBackButtonTap: function () {
        //clearPathOnMap();
        previousCard();
    }
});

sink.Main = {
    init: function () {
        this.ui = new Ext.ux.UniversalUI({
            title: sink.Structure[0].text,
            navigationItems: sink.Structure,
            buttons: [{ xtype: 'spacer'}],
            listeners: { navigate: this.onNavigate, scope: this }
        });
    },
    onNavigate: function (ui, item) { }
};

Ext.setup({
    icon: 'resources/img/icon.png',
    glossOnIcon: false,

    onReady: function () {
        sink.Main.init();
        Ext.regModel('Trip', {
            fields:
            [
                { name: 'departFrom', type: 'string' },
                { name: 'arriveTo', type: 'string' },
                { name: 'walk', type: 'string' },
                { name: 'minimize', type: 'string' },
                { name: 'use', type: 'string' }
            ]
        });

        TripPlan = Ext.ModelMgr.create({ 'departFrom': '', 'arriveTo': '', 'walk': '0.25', 'minimize': 'transfers', 'use': 'both' }, 'Trip');
    }
});


